<template>
  <view class="pickUpModePop">
    <view class="title">提货方式</view>
    <view class="contant">
      <view class="radio">
        <nut-radio-group v-model="sendGoodsStore.pickUpMode" direction="horizontal" @change="pickUpModechange">
          <nut-radio shape="button" label="2">配送</nut-radio>
          <nut-radio shape="button" label="3">直送</nut-radio>
          <nut-radio shape="button" label="1">自提</nut-radio>
        </nut-radio-group>
      </view>
      <view class="row" v-if="sendGoodsStore.pickUpMode =='2' ">
        <image src="@/assets/images/index/wangdian_img_peisongwangdian.png"></image>
        <view class="text">
          <view class="text1">
            <text>{{ sendGoodsStore.getBranch.info.COMPANYNAME }}</text>
            <view class="change_branch" @click="handleChangeBranch">
              <image src="@/assets/images/index/change.png"></image>
              <text>变更</text>
            </view>
          </view>
          <view class="text2">{{ sendGoodsStore.getBranch.info.LOCAL }}</view>
          <view class="text3">距离收货地{{ (sendGoodsStore.getBranch.info.distance/1000).toFixed(2) }}Km</view>
        </view>
        <view class="icon_group">
          <view  @click.native="toDial(sendGoodsStore.getBranch.info)">
            <image src="@/assets/images/index/icon_wangdiandianhua.png"></image>
          </view>
          <view  @click.native="toMap(sendGoodsStore.getBranch.info)">
            <image src="@/assets/images/index/icon_wangdiandaohang.png"></image>
          </view>
        </view>
      </view>
      <view class="cu-list menu card-menu " v-if="sendGoodsStore.pickUpMode =='2' ">
        <view class="cu-item arrow biaoshi">
          <view class="content sh-text-666">
            <text class="sh-text-666 left">配送时间段</text>
          </view>
          <!-- <view class="action comGoods">
            <text class="sh-text-999 right">请选择配送时间段</text>
          </view> -->
        </view>
      </view>
      <view class="h_item" v-if="sendGoodsStore.pickUpMode =='2' ">
        <sendTimeChoose :title="'配送开始时间'"></sendTimeChoose>
        <sendTimeChoose :title="'配送结束时间'"></sendTimeChoose>
      </view>
      <view class="cu-list menu card-menu " v-if="sendGoodsStore.pickUpMode !='1' ">
        <view class="cu-item biaoshi">
          <view class="content sh-text-666">
            <text class="sh-text-666 left">送货类型</text>
          </view>
          <view class="action">
            <nut-radio-group v-model="sendGoodsStore.deliveryType" direction="horizontal">
              <nut-radio label="0">无</nut-radio>
              <nut-radio label="1">送商超</nut-radio>
              <nut-radio label="2">进仓</nut-radio>
              <nut-radio label="3">报关</nut-radio>
            </nut-radio-group>
          </view>
        </view>
      </view>
      <view class="ziti" v-if="sendGoodsStore.pickUpMode =='1' ">

        <view class="row" v-for="(item,index) in props.companyList" :key="index" @click="chooseCompanyList(index)" :class="{ziti_active:chooseList===index}">
          <!-- <view class="ziti_choose"> -->
            <image src="@/assets/images/index/wangdian_img_tuijianwangdian.png" v-if="index == 0"></image>
            <image src="@/assets/images/index/wangdian_img_putongwangdian.png" v-else></image>
            <view class="text">
              <view class="text1">{{ item.COMPANYNAME }}</view>
              <view class="text2">{{ item.LOCAL }}</view>
              <view class="text3">距离收货地{{ (item.distance/1000).toFixed(2) }}km</view>
            </view>
            <view class="icon_group">
              <view @click.native="toDial(item)">
                <image src="@/assets/images/index/icon_wangdiandianhua.png"></image>
              </view>
              <view @click.native="toMap(item)">
                <image src="@/assets/images/index/icon_wangdiandaohang.png"></image>
              </view>
            </view>
          <!-- </view> -->
        </view>
      </view>
      <view class="xh" v-if="sendGoodsStore.pickUpMode !=='1'">
        <view class="xh_row">
          <view class="xh_left">
            <view class="ss">卸货服务</view>
            <view class="ss1">（送货上楼直达门口）</view>
          </view>
          <nut-switch v-model="sendGoodsStore.dischargeCargo" :active-value="'1'" :inactive-value="'0'" active-color="#0966ff" />
        </view>
      </view>
      <view class="xh_box" v-if=" sendGoodsStore.dischargeCargo == '1'&& sendGoodsStore.pickUpMode !=='1'">
        <view class="top">
          <view class="top_text">送货类型</view>
          <nut-radio-group v-model="sendGoodsStore.dischargeServer" direction="horizontal">
            <nut-radio label="1">标准件</nut-radio>
            <nut-radio label="2">非标件</nut-radio>
            <nut-radio label="3">特殊件</nut-radio>
          </nut-radio-group>
        </view>
        <view class="top lc">
          <view class="top_text">卸货楼层</view>
          <view class="botom_text" @click="openFloorPop">{{sendGoodsStore.dischargeElevator=='2'?'电梯或楼梯，送至几楼':(sendGoodsStore.dischargeElevator=='0'?'楼梯,':'电梯,')+sendGoodsStore.elevatorNum+'楼'}}</view>
        </view>
      </view>
    </view>
    <view class="foot">
      <view class="button" @click="sure" :class="{pickUpModePop_sure_active:(chooseList == null && sendGoodsStore.pickUpMode == '1') || (sendGoodsStore.pickUpMode == '2' && (sendGoodsStore.deliveryTime.start == '' || sendGoodsStore.deliveryTime.end == ''))}">确 定</view>
    </view>
    <nut-popup :style="{ height: '60%' }" position="bottom" :closeable="true" round v-model:visible="floorShow">
      <view class="title">卸货楼层</view>
      <view class="contant">
        <view class="floor_row">
          <view class="block" style=" margin-right:24rpx" :class="{actives:sendGoodsStore.dischargeElevator == '1'}" @click="chooseType('1')">电梯</view>
          <view class="block" :class="{actives:sendGoodsStore.dischargeElevator == '0'}" @click="chooseType('0')">楼梯</view>
        </view>
        <view class="floor_view">
          <view class="rowss">
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '1'}" @click="chooseFloor('1')">1楼</view>
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '2'}" @click="chooseFloor('2')">2楼</view>
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '3'}" @click="chooseFloor('3')">3楼</view>
          </view>
          <view class="rowss">
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '4'}" @click="chooseFloor('4')">4楼</view>
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '5'}" @click="chooseFloor('5')">5楼</view>
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '6'}" @click="chooseFloor('6')">6楼</view>
          </view>
          <view class="rowss">
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '7'}" @click="chooseFloor('7')">7楼</view>
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '8'}" @click="chooseFloor('8')">8楼</view>
            <view class="blocks" :class="{actives:sendGoodsStore.elevatorNum == '0'}" @click="chooseFloor('0')"> <nut-input v-model="floorValue" placeholder="输入楼层" type="number" /></view>
          </view>
        </view>
      </view>
      <view class="foot">
        <view class="button" @click="floorSure">确 定</view>
      </view>
    </nut-popup>


    <!--    变更网点弹窗-->
    <changeBranch
        :branchList="props.companyList"
        :branchNo="sendGoodsStore.getBranch.info.branchno"
        :show="showChangeBranch"
        @close="closeChangeBranch"
        @save="saveChangeBranch"
    ></changeBranch>





    <dialBranch :show="showTelPopup" :tel="branchTel" :title="'拨打电话'" @close="showTelPopup=false" :show-close="true"></dialBranch>


  </view>



</template>
<script lang="ts" setup>
import Taro, { useDidShow } from "@tarojs/taro";
import sendTimeChoose from "@/pages/sendGoods/sendTimeChoose";
import changeBranch from "@/pages/sendGoods/changeBranch";
import dialBranch from "@/components/dialBranch/index"
//import drawer from '@/components/drawer';
import { ref } from "vue";
import useSendGoodsStore from "../../store/sendGoods";
import { emitKeypressEvents } from "readline";
import {getBranchTel, RecommandReturnParam} from "@/@api";
const sendGoodsStore = useSendGoodsStore();
//是否显示变更网点弹窗
const showChangeBranch = ref<boolean>(false);
//提货方式改变
function pickUpModechange(){
  if(sendGoodsStore.pickUpMode != '1'){
    chooseList.value = 0
  }
}

//网点电话弹窗
const showTelPopup = ref<boolean>(false)
const branchTel = ref<string>('')
const toDial= async (item) => {
  let res = await getBranchTel([{branchCompanyNo:item.branchno}])
  if(res.code == 200 && res.data && res.data.length){
    branchTel.value = res.data[0].tel
    showTelPopup.value = true
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}

//是否选择自提
const chooseList = ref<number>(0)

//选择自提网点
function chooseCompanyList(index:number){
   chooseList.value = index
}
// const companyList = ref<any>([1, 2, 3, 4]);
//自定义楼层
const floorValue = ref<string>("");
//楼层选择打开
const floorShow = ref<boolean>(false);
function openFloorPop() {
  floorShow.value = true;
}
const props = defineProps<{
  companyList: RecommandReturnParamNew[];
}>();
const emit = defineEmits<{
  (e: "doSure", args: string);
}>();
//确定
function sure() {
  console.log(sendGoodsStore.getBranch.info,chooseList.value,666555);
  if(chooseList.value == null && sendGoodsStore.pickUpMode == '1'){
    return
  }
  console.log(sendGoodsStore.deliveryTime);

  if(sendGoodsStore.pickUpMode == '2' && (sendGoodsStore.deliveryTime.start == '' || sendGoodsStore.deliveryTime.end == '')){
    return
  }
  emit("doSure", chooseList.value);
}
//选择电梯或者楼梯
function chooseType(index: string) {
  sendGoodsStore.dischargeElevator = index;
}
//选择楼层高度
function chooseFloor(index: string) {
  sendGoodsStore.elevatorNum = index;
}
//选完楼层
function floorSure() {
  if (sendGoodsStore.elevatorNum == "0" && floorValue.value == "") {
    Taro.showToast({
      icon: "error",
      title: "请选择正确的楼层数",
    });
    return;
  }

  if (sendGoodsStore.elevatorNum == "0") {
    sendGoodsStore.elevatorNum = floorValue.value;
  }

  floorShow.value = false;
}



const toMap = (item:any) => {
  Taro.openLocation({
    latitude: Number(item.lat),
    longitude: Number(item.lng),
    scale: 11,
  })
}

const handleChangeBranch = () => {
  showChangeBranch.value = true
}
const closeChangeBranch = () => {
  showChangeBranch.value = false
}
const saveChangeBranch = (row) => {
  sendGoodsStore.getBranch.info = row
  showChangeBranch.value = false
}

//初始化
useDidShow(() => {
  sendGoodsStore.elevatorNum = "1";
  sendGoodsStore.dischargeElevator = "0";
  props.companyList.forEach((item,index)=>{
    if(sendGoodsStore.getBranch.info.COMPANYNAME === item.COMPANYNAME){
      chooseList.value = index
    }
  })
});
</script>

<style lang="scss">
.pickUpModePop_sure_active{
  background: #999 !important;
}
.lc:before {
  position: absolute;
  top: 0;
  right: 30rpx;
  bottom: 0;
  display: block;
  margin: auto;
  width: 30rpx;
  height: 30rpx;
  color: #8799a3;
  content: "\e6a3";
  text-align: center;
  font-size: 34rpx;
  font-family: cuIcon;
  line-height: 30rpx;
  margin: auto;
}
.h_item {
  width: 702rpx;
  background-color: #f5f5f5;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  //margin-left: 24rpx;
}
.ziti_active{
  border: 1rpx solid #0966FF;
}
.actives {
  border: 1px solid #0966ff !important;
  background: rgba(9, 102, 255, 0.05) !important;
  color: #0966ff !important;
}
.pickUpModePop {
  width: 100%;
  height: 100%;

  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    font-family: PingFangSC-Semibold;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
  }
  .contant {
    height: calc(100% - 240rpx);
    width: 100%;
    overflow:scroll;
    .floor_row {
      width: 100%;
      height: 144rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .block {
        width: 340rpx;
        height: 96rpx;
        border-radius: 16rpx;
        border: 1rpx solid #c4c4c4;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-family: PingFangSC-Semibold;
        font-size: 28rpx;
        color: #252525;
      }
    }
    .floor_view {
      width: 100%;
      height: 296rpx;
      .rowss {
        width: 100%;
        height: 72rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-evenly;
        .blocks {
          width: 204rpx;
          height: 72rpx;
          background: #f4f5f6;
          border-radius: 88rpx;
          font-family: PingFangSC-Semibold;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .nut-input {
            background-color: unset;
            border-bottom: unset;
          }
        }
      }
    }
    .xh_box {
      width: 100%;
      height: 176rpx;
      background: white;
      padding-top: 24rpx;
      box-sizing: border-box;
      .top {
        background: #f5f5f5;
        width: 702rpx;
        height: 87rpx;
        margin-left: 24rpx;
        padding: 0 24rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .top_text {
          font-family: PingFang SC;
          font-size: 28rpx;

          color: #666666;
        }
        .botom_text {
          font-family: PingFang SC;
          font-size: 28rpx;
          color: #999999;
          margin-right: 30rpx;
        }
      }
    }
    .ziti {
      width: 100%;
      height: 350rpx;
      background-color: white;
      overflow: auto;
      // .ziti_choose {
      //   display: flex;
      //   align-items: center;
      // }
    }
    .xh {
      width: 100%;
      height: 136rpx;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      .xh_row {
        width: 100%;
        height: 104rpx;
        background-color: white;
        padding: 0 24rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .xh_left {
          margin-left: 30rpx;
          display: flex;
          margin-right: 180rpx;
          .ss {
            font-family: PingFang SC Medium;
            font-size: 28rpx;

            color: #252525;
          }
          .ss1 {
            font-family: PingFang SC;
            font-size: 28rpx;

            color: #999999;
          }
        }
      }
    }
    .radio {
      width: 100%;
      box-sizing: border-box;
      padding: 0 24rpx;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .nut-radio__button--active {
        background: transparent;
        color: #0966ff;
        border: 2rpx solid #0966ff;

        position: relative;
      }
      .nut-radio__button {
        width: 218rpx;
        height: 72rpx;
        justify-content: center;
        border-radius: 88rpx;
        font-family: PingFang SC Medium;
        font-size: 28rpx;
      }
      .nut-radio__button--active::after {
        background-color: unset;
      }
    }
    .cu-list {
      position: relative;
      margin: 0;
      padding: 0 24rpx;
      box-sizing: border-box;
      .nut-radio-group--horizontal .nut-radio {
        margin-right: 0rpx;
      }
      .left {
        font-family: PingFang SC;
        font-size: 28rpx;

        color: #666666;
      }
      .right {
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #999999;
      }
    }
    .row:after,
    .cu-list:after {
      position: absolute;
      top: 0;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      border-bottom: 1rpx solid #ddd;
      border-radius: inherit;
      content: " ";
      -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      pointer-events: none;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: rgb(221, 221, 221);
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
      border-bottom-left-radius: inherit;
    }
    .row {
      position: relative;
      width: 100%;
      height: 176rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      image {
        width: 112rpx;
        height: 112rpx;
        margin-right: 16rpx;
      }
      .text {
        height: 112rpx;
        width: 400rpx;
        .text1 {
          font-weight: 700;
          font-family: PingFangSC-Semibold;
          font-size: 28rpx;
          color: #252525;
          display: flex;
          align-items: center;
          .change_branch {
            box-sizing: border-box;
            border: 1rpx solid #c4c4c4;
            width: 84rpx;
            height: 32rpx;
            border-radius: 24rpx;
            margin-left: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            > image {
              width: 20rpx;
              height: 20rpx;
              margin-right: 4rpx;
            }
            > text {
              color: #999;
              font-size: 18rpx;
            }
          }
        }
        .text2 {
          font-family: PingFang SC;
          font-size: 22rpx;
          color: #666666;
          margin-bottom: 16rpx;
          width: 370rpx;
          height: 30rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .text3 {
          font-family: PingFang SC;
          font-size: 22rpx;
          color: #666666;
        }
      }
      .icon_group {
        display: flex;
        height: 100%;
        align-items: center;
        margin-left: 30rpx;
        image {
          width: 64rpx;
          height: 64rpx;
        }
      }
    }
    .content {
      font-family: PingFang SC;
      font-size: 28rpx;

      color: #666666;
    }
    .comGoods {
      font-family: PingFang SC;
      font-size: 28rpx;
      color: #999999;
    }
  }
  .foot {
    width: 100%;
    height: 128rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    .button {
      width: 702rpx;
      height: 88rpx;
      border-radius: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0966ff;
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
.changeBranchContainer {
  .bottomBox {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 128rpx;
    width: 750rpx;
    border-top: 1rpx solid #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2500;
    .botBtn {
      width: 700rpx;
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #0966ff;
      color: #fff;
      font-size: 32rpx;
    }
  }
}

</style>
